<template>
    <el-menu
            :collapse="isCollapseComputed"
            default-active="1-4-1"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
    >
        <div class="adminProjectName" @click="toNavigate">
            <span v-show="!isCollapseComputed">{{ adminTitleComputed }}</span>
            <img v-show="isCollapseComputed" src="@/assets/images/login/appLogo.png" alt />
        </div>
        <el-submenu :index="v.name" v-for="v in adminMenuList" :key="v.id">
            <template slot="title">
                <i :class="v.icon"></i>
                <span>{{ v.name }}</span>
            </template>
            <!-- <el-menu-item-group> -->
            <el-menu-item
                    :index="v2.path"
                    v-for="v2 in v.children"
                    :key="v2.id"
                    @click="clickMenu(v2)"
            >{{ v2.name }}</el-menu-item>
            <!-- </el-menu-item-group> -->
        </el-submenu>
    </el-menu>
</template>

<script>
    export default {
        computed: {
            isCollapseComputed() {
                return this.$store.state.headerTag.isCollapseState;
            },
            adminTitleComputed() {
                return this.$store.state.headerTag.adminTitle;
            },
            clickMenuStateComputed() {
                return this.$store.state.headerTag.clickMenuState;
            }
        },
        data() {
            return {
                adminMenuList: []
            };
        },
        created() {
            this.menuListMethods();
        },
        methods: {
            toNavigate() {
                this.$router.push({ name: 'Home' })
            },
            menuListMethods() {
                this.$http.post("ruleAll", this.loginForm).then(response => {
                    console.log(response);
                    this.adminMenuList = this.$storage.getLocal("menuList", true);
                });
                this.$http.post("adminInfoMe");
            },
            clickMenu(param) {
                let path = param.path.split("/").slice(-1),
                    adminClickMenu = this.clickMenuStateComputed;
                if (path == adminClickMenu) {
                    // 调用reload方法，刷新整个页面
                    //  this.reload();
                } else {
                    this.$router.push({ name: path });
                }
            }
        },
        inject: ["reload"]
    };
</script>

<style scoped lang="scss">
    .el-menu {
        height: 100%;
        border-right: none;
    }
    .adminProjectName {
        border-bottom-color: transparent;
        color: rgb(255, 255, 255);
        background-color: rgb(84, 92, 100);
        height: 60px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        img {
            width: 50px;
            height: 50px;
        }
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
</style>